<template>
  <div class="share-validate">
    <img class="bg-icon" src="@/assets/png/bg1.png" alt="" />
    <img class="earth-icon" src="@/assets/png/earth1.png" alt="" />
    <div class="share-validate-content">{{ tip }}</div>
  </div>
</template>

<script setup lang="ts">
import { useRoute } from 'vue-router';
defineOptions({
  name: 'ScenePreviewValidate',
});
const route = useRoute();
const tipMap = new Map([
  ['1', '该链接不存在，无法访问'],
  ['2', '该链接已失效，无法访问'],
]);

const tip = computed(() => {
  const id = route.query.id as any;
  if (route.query.id && tipMap.has(id)) {
    return tipMap.get(id);
  }
  return tipMap.get('1');
});
</script>

<style lang="less" scoped>
.share-validate {
  width: 100%;
  height: 100%;
  background: #000;
  .bg-icon {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .earth-icon {
    position: absolute;
    left: 50%;
    top: 46%;
    transform: translate(-50%, -50%);
    width: 540px;
    height: 540px;
  }
  &-content {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 700px;
    height: 84px;
    background: #ffffff;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    color: #161616;
    font-size: 18px;
  }
}
</style>
